<template>
    <div class="show-contain"
         :class="[compOption.isClick && mode == 'sheji' ? 'active-bordert' : '',mode == 'sheji' ? 'widget-item' : '']"
         @click.stop="clickToggleBg">
        <div style="display: flex;align-items: center;width: 100%;">
            <div class="required-title" v-if="mode != 'sheji' && compOption.options.required">*</div>
            <div class="sort-style" v-if="prentCompOption.isChildSort && prentCompOption.isPrentAndChildSort">
                {{ prentCompOption.sortTitle + '.' + (childInd + 1) }}
            </div>
            <div class="sort-style" v-else-if="prentCompOption.isChildSort">{{ childInd + 1 }}</div>
            <div class="sort-style" v-else-if="prentCompOption.isPrentAndChildSort">{{ prentCompOption.sortTitle }}
            </div>
            <div class="title-openEdit" @click.stop="openTitleEditor(compOption.displayName)"
                 v-html="mode == 'sheji' ? compOption.displayName : compOption.displayName + (compOption.options.totalSource == 0 ? '' :  ` <span style='width:80px;align-self: flex-end'>(${compOption.options.totalSource}) 分</span>`)"
                 :style="{border:mode == 'sheji' ? '1px solid rgba(204, 200, 200, 0.5)' : 'none',padding:mode == 'sheji' ? '10px' : '0',
           }" style="font-size: 18px"></div>
            <div style="margin-left: 10px" v-if="compOption.isClick && mode == 'sheji'">
                <div class="flex-row">
                    <!--                    <span class="el-icon-rank font-color-main" style="margin-right: 10px"></span>-->
                    <!--                    <span class="el-icon-document-copy font-color-main" style="margin-right: 10px"></span>-->
                    <span class="el-icon-delete font-color-main" @click="delSourceZu"></span>
                </div>
            </div>
        </div>
        <div  style="margin-bottom: 10px;width: 100%" v-if="mode == 'yulan' && (compOption.options.score !==null && compOption.options.score != '不适用')">
            <el-row style="display: flex;align-items: center">
                <el-col :span="1">
                    <div>已得</div>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="compOption.options.score"  class="el-border-dev"
                              :disabled="sourceMode == 'yulan'"></el-input>
                </el-col>
                <el-col :span="2">
                    <div>分</div>
                </el-col>
            </el-row>
        </div>
        <div v-if="compOption.options.questionStem" :style="{marginBottom: mode == 'sheji' ? '10px' : '20px'}"
             style="width: 100%">
            <el-input v-model="compOption.options.placeholderContent" v-if="mode == 'sheji'"
                      placeholder="请输入题干说明"
                      style="width: 100%"></el-input>
            <div v-else class="tigan">
                {{ compOption.options.placeholderContent }}
            </div>
        </div>

        <div v-for="(item,index) in compOption.options.scoreConfig" style="width: 100%;margin-bottom: 15px;" :key="item.id"
             class="flex-row">
            <div :style="{margin:compOption.options.scoreConfig.length - 1 == index ? '10px 0 0 20px' : '10px 0 20px 20px'}">
                <el-input v-model="item.label" v-if="mode == 'sheji'" clearable
                style="margin-bottom: 10px;" placeholder="请输入选项名称"></el-input>
                <div style="margin-bottom: 10px;font-size: 16px" v-if="mode != 'sheji'">{{ item.label }}</div>
                <div style="width: 100%;display: flex;flex-wrap: wrap"
                     v-if="compOption.options.showStyle == '五角星'">
      <span v-for="index in compOption.options.liangSetting" :key="index"
            class="iconfont icon-star cursor-pointer wei-active-wujiaoxing"
            :ref="item.label"
            @click="(e) => clickActive(e,'五角星',item)" style="font-size: 20px;margin-right: 40px" :ind="index"
      ></span>
                </div>
                <div style="width: 100%;display: flex;flex-wrap: wrap"
                     v-if="compOption.options.showStyle == '爱心'">
      <span v-for="index in compOption.options.liangSetting" :key="index"
            class="iconfont icon-aixin cursor-pointer wei-active-wujiaoxing"
            :ref="item.label"
            @click="(e) => clickActive(e,'爱心',item)" style="font-size: 20px;margin-right: 40px" :ind="index"
      ></span>
                </div>
                <div style="width: 100%;display: flex;flex-wrap: wrap"
                     v-if="compOption.options.showStyle == '笑脸'">
      <span v-for="index in compOption.options.liangSetting" :key="index"
            :ref="item.label"
            class="iconfont icon-xiaolian cursor-pointer wei-active-wujiaoxing"
            @click="(e) => clickActive(e,'笑脸',item)" style="font-size: 20px;margin-right: 40px" :ind="index"
      ></span>
                </div>
                <div style="width: 100%;display: flex;flex-wrap: wrap"
                     v-if="compOption.options.showStyle == '点赞'">
      <span v-for="index in compOption.options.liangSetting" :key="index"
            :ref="item.label"
            class="iconfont icon-dianzan cursor-pointer wei-active-wujiaoxing"
            @click="(e) => clickActive(e,'点赞',item)" style="font-size: 20px;margin-right: 40px" :ind="index"
      ></span>
                </div>
                <div style="width: 100%;margin-top: 20px;text-align: center;padding-right: 41px;
font-size: 12px;color: #aaa" v-if="mode == 'sheji'" class="flex-row">
                    <el-input v-model="item.leftTip" clearable placeholder="请输入左边提示文字"></el-input>
                    <el-input v-model="item.cenTip" clearable placeholder="请输入中间提示文字"></el-input>
                    <el-input v-model="item.rightTip" clearable placeholder="请输入右边提示文字"></el-input>
                </div>
                <div style="width: 100%;margin-top: 20px;text-align: center;padding-right: 41px;
font-size: 12px;color: #aaa" v-if="mode != 'sheji'">
                    <span style="float: left">{{ item.leftTip }}</span>
                    <span>{{ item.cenTip }}</span>
                    <span style="float: right">{{ item.rightTip }}</span>
                </div>
            </div>
            <span style="margin-left: 10px;color: #ec2d2d" class="el-icon-delete-solid"
                  @click.stop="delRadio(index)" v-if="mode == 'sheji'"></span>
        </div>
        <div  style="color: #409eff;margin-top: 10px" class="flex-row"
              v-if="mode == 'sheji'">
            <div class="iconfont icon-jiahao" style="margin-right: 5px"></div>
            <div @click.stop="submitForm">添加选项</div>
        </div>
        <div v-if="mode != 'sheji'" style="margin-top: 10px;width: 100%">
            <render-remark :comp-option="compOption" :mode="mode"></render-remark>
        </div>
        <dialog-editor ref="dialogEditor" @throwHtml="(html) => compOption.displayName = html"></dialog-editor>
    </div>
</template>
<script>
import {openEditor} from '@/minexs/index'
import {methodRef} from '@/components/form-designer/widget-panel/main-comp-panal/methodRef'
import RenderRemark from "@/components/renderRemark/renderRemark.vue";
import {v4} from "uuid";
let activeInd = 0
export default {
    name: "markScore-editor",
    components: {RenderRemark},
    mixins: [openEditor, methodRef],
    props: {
        compOption: {
            type: Object,
        },
        prentCompOption: {
            type: Object,
        },
        childInd: {
            type: Number
        },
        mode: {
            type: String,
            default: 'sheji'
            /**
             * sheji
             * xiezuo
             * yulan
             * */
        },
        sourceMode: {
            type: String,
            default: 'yulan'
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.mode != 'sheji') {
                for (let val of this.compOption.options.scoreConfig) {
                    if (val.value) {
                        this.clickCloneActive(this.$refs[val.label][val.value - 1], this.compOption.options.showStyle, val)
                    }
                }
            }
        })

    },
    methods: {
        clickToggleBg() {
            if (this.$props.mode == 'sheji') this.$emit('changeClick', this.$props.compOption.id, this.$props.prentCompOption.id)
        },
        clickCloneActive(e, type, item) {
            let activeClass = ''
            if (type == '五角星' || type == '笑脸') {
                activeClass = 'active-wujiaoxing'
            } else if (type == '爱心') {
                activeClass = 'active-aixin'
            } else {
                activeClass = 'active-dianzan'
            }
            let num = 0
            let bol = true
            let parentDiv = null
            if (e.target) {
                parentDiv = e.target.parentNode
            } else {
                parentDiv = e.parentNode;
            }
            for (let nodeVal of Array.from(parentDiv.childNodes)) {
                if (nodeVal.classList.contains('wei-active-wujiaoxing')) {
                    nodeVal.classList.remove('wei-active-wujiaoxing');
                } else if (nodeVal.classList.contains(activeClass)) {
                    nodeVal.classList.remove(activeClass);
                    bol = false
                }
            }
            let inde = null
            if (e.target) {
                inde = e.target.getAttribute('ind')
            } else {
                inde = e.getAttribute('ind')
            }
            if (!bol && inde == activeInd) {
                item.value = 0
                if (this.compOption.options.onChangeValue) {
                    this.$emit('activeStartChange', {
                        code: this.compOption.options.onChangeValue,
                        value: item.value
                    })
                }
                return
            }
            if (inde > 1) {
                const nodeArray = Array.from(parentDiv.childNodes).slice(0, inde * 1)
                for (let val of nodeArray) {
                    val.classList.add(activeClass);
                    num = num + 1
                }
            } else {
                let classSet = null
                if (e.target) {
                    classSet = e.target
                } else {
                    classSet = e
                }
                classSet.classList.add(activeClass);
                num = num + 1
            }
            activeInd = inde
            item.value = num
            if (this.compOption.options.onChangeValue) {
                this.$emit('activeStartChange', {
                    code: this.compOption.options.onChangeValue,
                    value: item.value
                })
            }
        },
        clickActive(e, type, item) {
            if (this.mode == 'yulan' || this.compOption.options.readOnly) return
            let activeClass = ''
            if (type == '五角星' || type == '笑脸') {
                activeClass = 'active-wujiaoxing'
            } else if (type == '爱心') {
                activeClass = 'active-aixin'
            } else {
                activeClass = 'active-dianzan'
            }
            let num = 0
            let bol = true
            let parentDiv = null
            if (e.target) {
                parentDiv = e.target.parentNode
            } else {
                parentDiv = e.parentNode;
            }
            for (let nodeVal of Array.from(parentDiv.childNodes)) {
                if (nodeVal.classList.contains('wei-active-wujiaoxing')) {
                    nodeVal.classList.remove('wei-active-wujiaoxing');
                } else if (nodeVal.classList.contains(activeClass)) {
                    nodeVal.classList.remove(activeClass);
                    bol = false
                }
            }
            let inde = null
            if (e.target) {
                inde = e.target.getAttribute('ind')
            } else {
                inde = e.getAttribute('ind')
            }
            if (!bol && inde == activeInd) {
                item.value = 0
                if (this.compOption.options.onChangeValue) {
                    this.$emit('activeStartChange', {
                        code: this.compOption.options.onChangeValue,
                        value: item.value
                    })
                }
                return
            }
            if (inde > 1) {
                const nodeArray = Array.from(parentDiv.childNodes).slice(0, inde * 1)
                for (let val of nodeArray) {
                    val.classList.add(activeClass);
                    num = num + 1
                }
            } else {
                let classSet = null
                if (e.target) {
                    classSet = e.target
                } else {
                    classSet = e
                }
                classSet.classList.add(activeClass);
                num = num + 1
            }
            activeInd = inde
            item.value = num
            if (this.compOption.options.onChangeValue) {
                this.$emit('activeStartChange', {
                    code: this.compOption.options.onChangeValue,
                    value: item.value
                })
            }
        },
        delSourceZu() {
            this.$confirm('是否确认删除当前问题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ind = this.prentCompOption.widgetList.findIndex(item => item.id == this.compOption.id)
                if (ind != -1) {
                    this.prentCompOption.widgetList.splice(ind, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
            })
        },
        submitForm(){
            this.compOption.options.scoreConfig.push({
                id:v4(),
                label:'',
                leftTip:'',
                cenTip:'',
                rightTip:'',
            })
        },
        delRadio(index){
            this.compOption.options.scoreConfig.splice(index,1)
        }
    }

}
</script>

<style scoped lang="scss">
.widget-item {
  border: .5px solid #e5e5e5;
  border-radius: 3px;
  padding: 20px;
}
</style>
